<template>
  <div class="pages" style="padding-top: 20px;">
    <div class="card">
<!--      <van-icon :name="isShow?'arrow-up':'arrow-down'" />-->
<!--      <p style="text-align: center;" @click="openItem">{{isShow?'隐藏名片':'展开名片'}}-->
<!--        -->
<!--      </p>-->
<!--      <div class='openItem' :class="{active:isShow}">-->
<!--        <indexMb v-if="cardData.type==2" :data="cardData"  :isShow="true" :isMeIndex="isMeIndex"></indexMb>-->
<!--        <indexMb1 v-if="cardData.type==1" :data="cardData"  :isShow="true" :isMeIndex="isMeIndex"></indexMb1>-->
<!--        &lt;!&ndash;          <div class="cardBox">&ndash;&gt;-->
<!--      </div>-->

    </div>
<!--    <p class="title">-->
<!--      主推产品-->
<!--    </p>-->
    <h2 class="title" style="line-height: 54rpx;background: #fff;">商品展示</h2>
    <div class="product" v-if="isLogin">
      <template v-if="detailListCopy.length">


      <ul class="product_list" >
        <li v-for="(a,i) in detailListCopy" :key="i" @click="goDetail(a)">
          <van-icon name="new-arrival" v-if="a.label" color="#FF0000" size="70rpx" style="position: absolute;top: -10rpx;"/>
             <span class="cartNum" v-if="a.hasChildren">{{a.hasChildren}}张</span>
             <img :src="a.simplename" alt="" height="150" mode="aspectFill">


<!--          <van-image-->
<!--            width="100"-->
<!--            height="100"-->
<!--            :src="a.imgUrls"-->
<!--          />-->
          <p style="word-break:keep-all;text-overflow: ellipsis;overflow: hidden;">{{a.description||'敬请期待'}} <van-icon color="#CC0000" v-if="a.hasChildren" size="14" name="play-circle" /></p>
        </li>

      </ul>
      <div class="weui-loadmore" @click="gewhoSctMore" v-if="iscurrPage>0">
        <span class="weui-loadmore__tips"  style="color:#FFB90F">加载更多--剩余{{iscurrPage}}页</span>
      </div>

      <div class="weui-loadmore weui-loadmore_line" style="margin: 0 auto;" v-if="outData">
        <span class="weui-loadmore__tips">已经到底了</span>
      </div>
      </template>
      <p v-if="!detailListCopy.length" style="text-align: center;">暂无商品</p>
    </div>
    <div class="product" v-if="!isLogin">



          <ul class="product_list" >
            <li >


                 <img src="https://img.xbdzmp.com/20200428111724ed9c42567b9c.jpg" alt="" height="150" mode="aspectFill">

              <p style="word-break:keep-all;text-overflow: ellipsis;overflow: hidden;">产品展示 </p>
            </li>
            <li >


                 <img src="https://img.xbdzmp.com/20200428111831d75990ae5f0b.jpg" alt="" height="150" mode="aspectFill">

              <p style="word-break:keep-all;text-overflow: ellipsis;overflow: hidden;">敬请期待 </p>
            </li>
            <li >


                 <img src="https://img.xbdzmp.com/20200428111848ecc0c12b7311.jpg" alt="" height="150" mode="aspectFill">

              <p style="word-break:keep-all;text-overflow: ellipsis;overflow: hidden;">敬请期待 </p>
            </li>
            <li >


                 <img src="https://img.xbdzmp.com/20200430025630e97ede16e5a8.jpg" alt="" height="150" mode="aspectFill">

              <p style="word-break:keep-all;text-overflow: ellipsis;overflow: hidden;">敬请期待 </p>
            </li>

          </ul>



        </div>
    <getUserinfo ref="getUserinfo" :isShow="userInfoShow" ></getUserinfo>

  </div>
</template>

<script>
  import card from '@/components/card'
  import indexMb from './indexMb.vue'
  import indexMb1 from './indexMb1.vue'
  import getUserinfo from './getUserinfo'
  export default {
    name: 'index',
      props:['isMeIndex','cardId','isLogin'],
    data () {
      return {

        id: '',
        list: [],
        loadMore:true,
        outData:false,
        userInfoShow:false,
        cardData: {},
        isShow: false,
        productId:"",
          widthItem:"90%",
        ids:"",
        isVip:"",
        active: 1,
        iscurrPage:"",
        dataTree: [],
        isOpen:true,
        isSc:false,
        isShare:true,
        token:"",
        empId:"",
          pageNum:1,
          pageSize:10,
          detailList: [

              ],
          detailListCopy: [

          ],
          result:[]
      }
    },
    onLoad (id) {
     // console.log(id)
      this.id = id.id;
      this.empId=id.empId;
        this.getList ();
        //console.log(id)
        // this.getListDetail()
  },
    components: {
      card,
      indexMb,
      indexMb1,
      getUserinfo
    },

    onReady () {
      this.pageNum=1;
      wx.setNavigationBarTitle({
        title: '产品中心'
      })
     this.token=  wx.getStorageSync('Authorization')
        this.getList ();
     this.isVip=  wx.getStorageSync('isVip')
        // this.getListData()
        this.pageNum=1;
     // this.isVip=""
    },
    onShow() {

      this.getList ();

    },
    onUnload () {
     this.active=1;
     this.$forceUpdate()
    },
	onPullDownRefresh(){
		 this.pageNum=1;
		 this.getList(this.id);
	},
      // onReachBottom () {
      //     // wx.showNavigationBarLoading()
      //
      //   console.log('pull')
      //     if(this.result.length){
      //         this.pageNum++;
      //     }
      //     this.getList(this.id)
      //     // wx.stopPullDownRefresh()
      // },
    methods: {

      // changeDomFun(){
      //   wx.navigateTo({
      //     url: '/pages/productDetail/main?id=' + this.productId
      //   })
      // },
      gewhoSctMore(){
        this.loadMore=false;
        this.pageNum++;
        this.getList();
      },
      openItem () {
        this.isShow = !this.isShow
      },
      getList (id) {
       // console.log(this.cardId)
        let cartId = "";
        if(this.cardId!=0){
          cartId = wx.getStorageSync('cartId')
        }else{
           cartId = wx.getStorageSync('cartId1')
        }

          this.$http.request({
              method: 'post',
              url: `/api/material/getTopPList`,
              body: {
                  cardId:cartId,
                  pageNum:this.pageNum,
                  pageSize:this.pageSize,

              }
          }).then((data) => {
              if (data.code == 200) {
                wx.stopPullDownRefresh();
                wx.hideLoading()
                  this.result=data.data.list;
                  this.list = data.data.list;
                  this.iscurrPage=data.data.totalPage-data.data.currPage;
                  if (this.pageNum == 1) {
                      this.detailListCopy= data.data.list;
                    if(this.result.length<6){

                      this.loadMore=false;
                      this.outData=true;
                    }
                    else{

                      this.loadMore=true;
                      this.outData=false;
                    }
                  }else{
                    let isAdd=false;
                    this.detailListCopy.forEach((a,i)=>{
                      data.data.list.forEach((m,n)=>{
                        if(a.id==m.id){
                          isAdd=false;
                        }else{
                           isAdd=true;
                        }
                      })
                    })
                    if(isAdd){
                       this.detailListCopy.push(...data.data.list);
                    }


                    if(this.result.length<6){

                      this.loadMore=false;
                      this.outData=true;
                    } else{

                      this.loadMore=true;
                      this.outData=false;
                    }
                  }


              } else {
                  // wx.showToast({
                  //     title: `${data.message}`,
                  //     icon: 'none',
                  //     duration: 2000
                  // })
              }
          }).catch((err) => {
              // this.isCart = false
          })
      },

      goDetail (a) {
        if(a.id){
          let userInfo = wx.getStorageSync('userInfo')

          // if(userInfo){
          //   if(a.hasChildren){
          //     wx.navigateTo({
          //       url: '/pages/productCartDetail/main?id=' + a.id
          //     })
          //   }else{
              if(userInfo){
                  if(a.hasChildren) {
                    wx.navigateTo({
                      url: '/pages/productCartDetail/main?id=' + a.id+'&isCard='+this.cardId
                    })
                  }else{
                    wx.setStorageSync('list',JSON.stringify(this.detailListCopy))
                    wx.navigateTo({
                      url: '/pages/productDetail/main?id=' + a.id
                    })
                  }

              }else{
                this.$refs.getUserinfo.init(this.empId)
              }

            // }

          // }else{
          //   this.userInfoShow=true;
          // }

        }

      },
      treeToArray (tree) {
       	 let arr = []
    	 const expanded = datas => {
      	    if (datas && datas.length > 0) {
      	      datas.forEach(e => {
      	        arr.push(e)
    	        expanded(e.childList)
    	      })
      	    }
      	  }
        expanded(tree)
        return arr
      },

      // getArr(tree){
      //   tree.forEach((a,i)=>{

      //        this.dataTree.push(a);

      //     if(a.childList.length){
      //        this.getArr(a.childList)
      //     }
      //   })

      // },
      goCode () {
        wx.navigateTo({
          url: '/pages/code/main'
        })
      },
      addBox () {
        wx.navigateTo({
          url: '/pages/index/main'
        })
        // wx.navigateBack({})
      },
      open () {
        let _this = this
        wx.showActionSheet({
          itemList: this.itemList,
          success: function (res) {
          //  console.log('index：' + res.tapIndex, '用户选的值为：' + _this.itemList[res.tapIndex])
          }
        })
      }
    }
  }
</script>

<style scoped>
  .openItem {
    width: 100%;
    height: 0;

    overflow: hidden;
    transition: all 0.6s;
  }

  .openItem.active {
    padding: 30rpx 0;
    width: 100%;
    height: auto;
    transition: all 0.6s;
  }

  .product {
    width: 100%;
    background: #fff;
    box-sizing: border-box;
    padding: 20rpx;
    font-size: 28rpx;
  }

  .product>.product_list {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .product>.product_list>li {
    width: 45%;
    box-sizing: border-box;
    border-radius: 20rpx;
    margin-bottom: 30rpx;
    position: relative;
    box-shadow: 5px 5px 5px rgb(251, 251, 251);
    position: relative;
  }

  .product>.product_list>li>p {
    text-align: center;
  }

  .product>.product_list>li>img {
    border: 1px solid #ddd;
    width: 100%;
    height: 150px;
  }

  .pages>.title {
    box-sizing: border-box;
    padding-left: 5%;
    text-align: left;
    line-height: 80rpx;
    /*margin-top:20rpx;*/
    color: #000;
  }

  .card {
    width: 100%;
    background: #fff;
    box-sizing: border-box;
    padding: 20rpx;
  }

  .cardText img {
    width: 40rpx;
    height: 40rpx;
    margin-right: 30rpx;
  }

  .cardText .cardTop {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 32rpx;
  }
  .title{
    text-align: left;
    box-sizing: border-box;
    padding-left: 40rpx;
    position: relative;
    /*margin-bottom: 40rpx;*/
  }
  .title:before{
    content:"" ;
    width: 10rpx;
    height: 20px;
    background: #10AEFF;
    position: absolute;
    top:7rpx;
    left:17rpx;
  }
  .product_list .cartNum{
    position: absolute;
    bottom:56rpx;
    right: 0;
    color: #fff;
    font-weight: bold;



  }
  .card_name span {
    display: block;
    font-size: 30rpx;
  }

  .card_name span:first-child {
    font-size: 50rpx;
    margin-top: 20rpx;
  }

  .btn_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*margin-top:40rpx;*/
  }

  .list {
    font-size: 26rpx;
  }

  .list>li {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 10rpx;
  }

  .list>li>img {
    width: 20rpx;
    height: 20rpx;
  }

  .cardBox {
    width: 90%;
    height: 400rpx;
    background: rgb(248, 248, 248);
    margin: 0 auto;
    border-radius: 20rpx;
    box-sizing: border-box;
    padding: 20rpx 40rpx;
    box-shadow: 5px 5px 5px #999;
    display: flex;
    justify-content: space-between;
    position: relative;

  }

  .addCard {
    position: absolute;
    bottom: 0;
    right: 20rpx;
    width: 100rpx;
    height: 100rpx;
    background: rgb(174, 174, 174);
    border-radius: 50%;
    text-align: center;
    line-height: 100rpx;
  }

  .addCard>img {
    width: 80rpx;
    height: 80rpx;
  }

  .cardBox>p>img {
    width: 150rpx;
    height: 150rpx;
    border-radius: 50%;
  }

</style>
